/*
 * @Description:
 * @Autor: fage
 * @Date: 2022-07-07 14:36:09
 * @LastEditors: chenbinfa
 * @LastEditTime: 2022-09-20 10:21:39
 */
import React, { useRef, useState, useEffect } from "react";
import styled from "styled-components";
import {
	DatePicker,
	Input,
	InputNumber,
	Menu,
	Modal,
	Button,
	Tooltip,
	Dropdown,
	Descriptions,
	Select,
	Space,
	Table,
	message,
	Tabs,
	Popconfirm,
	Checkbox,
	Card,
	Form,
	Collapse,
	Empty
} from "antd";
import { UserOutlined, DownOutlined, DeleteOutlined, SwapRightOutlined, CheckCircleOutlined, ExclamationCircleOutlined } from "@ant-design/icons";
import _ from "lodash";
import { useNavigate } from "react-router-dom";
import moment from "moment";
import { formatterCurrency, formatterCurrencyStr, formatterSize, formatterSizeFromMB } from "@utils/format";
import copy from "copy-to-clipboard";
import { NavLink, Outlet, useParams } from "react-router-dom";
import { ThTable } from "@/components/ThTable";
import { isMobile } from "@utils";
import SearchBar from "@/components/SearchBar";
import MList from "@/components/mobile/MList";
import Footer from "@/components/Footer";
import common from "@utils/common";
import api from "@services/";
const isM = isMobile();

const { Option } = Select;
const { Column, ColumnGroup } = Table;
const { TabPane } = Tabs;
const { RangePicker } = DatePicker;
const { TextArea } = Input;

const columns = [
	{
		title: "Time(" + common.getTimeZone() + ")",
		dataIndex: "timestamp",
		key: "timestamp",
		width: "18%",
		showType: "datetime",
		tpl:"fromNow",
	},
	{
		title: "Block",
		dataIndex: "block_id",
		key: "block_id",
		width: "10%",
		textWrap: "word-break",
		ellipsis: true,
		showType: "link",
		tpl: "/block/{block_id}",
	},
	{
		title: "Hash",
		dataIndex: "extrinsic_hash",
		key: "extrinsic_hash",
		width: "22%",
		textWrap: "word-break",
		ellipsis: true,
		showType: "addr",
		link:"/extrinsic/{extrinsic_hash}"
	},
	{
		title: "Method",
		dataIndex: "event_name",
		key: "event_name",
		width: "28%",
		textWrap: "word-break",
	},
	{
		title: "Type",
		dataIndex: "event_type",
		key: "event_type",
		width: "15%",
		textWrap: "word-break",
	}
];

const Main = ({ ...propsS }) => {
	const [totle, setTotle] = useState(0);
	document.title = "Transfers-CESS Scan";
	let params = useParams();
	useEffect(() => {
		common.showAPIUrl();
	}, []);
	const props = {
		border: true,
		size: "middle",
		pagesize: 10,
		cacheKey:"event-list",
		loadList: {
			method: api.event.list,
			cb: {
				total: setTotle
			}
		},
		table: {
			columns,
			// expandable: {
			// 	expandIcon: ({ expanded, onExpand, record }) =>
			// 		expanded ? (
			// 			<div onClick={e => onExpand(record, e)} className="icon-expanded-open"><span></span></div>
			// 		) : (
			// 			<div onClick={e => onExpand(record, e)} className="icon-expanded-close"><span></span></div>
			// 		),
			// 	expandedRowRender: (record) => (
			// 		<div className="div-table">
			// 			<div className="tb-title">{record.event_name}</div>
			// 			<div className="tr">
			// 				<div className="td">dispatchInfo</div>
			// 				<div className="td border-left">
			// 					<div className="td-1 border-bottom">class</div>
			// 					<div className="td-2 border-bottom">weight</div>
			// 					<div className="td-1">PaysFee</div>
			// 				</div>
			// 				<div className="td border-left">
			// 					<div className="td-1 border-bottom">2</div>
			// 					<div className="td-1 border-bottom border-right">refTime</div>
			// 					<div className="td-1 border-bottom border-right">proofSize</div>
			// 					<div className="td-1">Yes</div>
			// 				</div>
			// 				<div className="td">
			// 					<div className="td-1 border-bottom"></div>
			// 					<div className="td-1 border-bottom">260,558,000</div>
			// 					<div className="td-1 border-bottom">0</div>
			// 					<div className="td-1"></div>
			// 				</div>
			// 			</div>
			// 		</div>
			// 	),
			// 	rowExpandable: false
			// }
		}
	};
	
	return (
		<div className="containner-in">
			<SearchBar background={"#f4f4f4"} height="100px" />
			<div className="content">
				<div className="list">
					<div>
						<div className="o-title">
							<img src={process.env.PUBLIC_URL + "/img/event.png"} />
							Events  ({totle.toLocaleString("zh", { style: "decimal" })})
						</div>
						<div className="pc-list">
							<ThTable props={props} />
						</div>
						<div className="mobile-list">
							<MList props={props} />
						</div>
					</div>
				</div>
			</div>
			<Footer />
		</div>
	);
};

export default styled(Main)`
	display: block;
	overflow: hidden;
	
`;

